<%-- 
    Document   : cityCr
    Created on : 2012-2-18, 17:39:02
    Author     : EnzoZhong
--%>

<%@ page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
        <head>
                <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
                <%--Jquery加载--%>
                <script src="${obj.path}js/jquery/jquery.js"></script>
                <script src="${obj.path}js/jquery/jquery.ui.js"></script>
                <script src="${obj.path}js/json/jquery.json.js"></script>
                <script src="${obj.path}js/jquery.ez.js"></script>
                <%--z-tree加载--%>
                <script src="${obj.path}js/ztree/jquery.ztree.all.js"></script>
                <script src="${obj.path}js/ztree/jquery.ztree.core.js"></script>
                <%--datatable--%>
                <script src="${obj.path}js/datatables/js/jquery.dataTables.min.js"></script>
                <%--css加载--%>
                <style>
                        @import "${obj.path}js/jquery/css/jquery-ui-1.8.17.custom.css";
                        @import "${obj.path}js/ztree/css/zTreeStyle.css";
                        @import "${obj.path}js/datatables/css/demo_table_jui.css";

                        @import "${obj.path}css/crudCityCatalogo.css";
                </style>

                <script>
                        $().ready(function(){
                                var comTab = $("#comTab").tabs();
                                var comTable = $("#comTable").append("<tbody>").dataTable({
                                        "bJQueryUI" : true,
                                        "sScrollX" : "99%",
                                        "bLengthChange" : false,//每行显示记录数
                                        "bPaginate" : false,//分页按钮
                                        "iDisplayLength" : -1,
                                        "aoColumns": ${obj.aoColumns}
                                });
                                var comDialogo = $("#comDialogo").dialog({
                                        modal : true,
                                        title : "Please wait..."
                                }).dialog("close");
                
                                $("*[fast]").keypress(function(event){
                                        if(event.keyCode == 13){
                                                submit();
                                        }
                                });
                    
                                tableRefresh();
                    
                                function tableRefresh(){
                                        $(comDialogo).dialog("open");
                                        //表格更新数据方法
                                        $.ajax({
                                                url : "/back/${obj.type}/readAll",
                                                type : "get",
                                                dataType : "json",
                                                success : function(res) {
                                                        //为了数据的同步性，把表格现有数据全部清除
                                                        comTable.fnClearTable();
                                                        $.each(res,function(k,v){
                                                                comTable.dataTable().fnAddData(v);
                                                        });
                              
                                                        $("#comTable tbody tr").click( function( e ) {
                                                                //完成数据初始化后，添加点击变色事件
                                                                if ( $(this).hasClass('row_selected') ) {
                                                                        $(this).removeClass('row_selected');
                                                                }else {
                                                                        comTable.$('tr.row_selected').removeClass('row_selected');
                                                                        $(this).addClass('row_selected');
                                                                }
                                                        });
                                                        $(comDialogo).dialog("close");
                                                }
                                        });
                                }
                  
                                $("#buttonCreate").button().click(function(){
                                        comTab.tabs("select",1);
                                });
                    
                    
                                $("#buttonRefresh").button().click(function(){
                                        tableRefresh();
                                });
                    
                                $("#buttonUpdate").button().click(function(){
                                        
                                        var json = send4Read();
                                        $(comDialogo).dialog("open");
                                
                                        $.ajax({
                                                url : "/back/${obj.type}/readById",
                                                type : "post",
                                                data : json,
                                                dataType : "json",
                                                success : function(res) {
                                                        $(comDialogo).dialog("close");
                                                        setForm("name",res);
                                                        setForm("map",res.translate);
                                                        comTab.tabs("select",1);
                                                }
                                        });
                        
                                });
                    
                                $("#buttonDelete").button().click(function(){
                    
                                        var json = send4Read();
                    
                                        $(comDialogo).dialog({
                                                modal : true,
                                                title : "are u sure to del? " + json,
                                                buttons: [{
                                                                text: "Del",
                                                                click: function() {
                                                                        $.ajax({
                                                                                url : "/back/${obj.type}/delete",
                                                                                type : "post",
                                                                                data : json,
                                                                                dataType : "json",
                                                                                success : function(res) {
                                                                                        tableRefresh();
                                                                                        $(comDialogo).dialog("close");
                                                                                }
                                                                        });
                                                                }
                                                        },{
                                                                text: "Cancel",
                                                                click: function() { 
                                                                        $(comDialogo).dialog({
                                                                                modal : true,
                                                                                title : "Please wait..."
                                                                        }).dialog("close");
                                                                }
                                                        }
                                                ]
                                        });
                                });
                    
                                $("#buttonBack").button().click(function(){
                                        cleanForm();
                                        comTab.tabs("select",0);
                                });
                    
                                $("#buttonSubmit").button().click(function(){
                                        submit();
                                });
                
                                function submit(){
                                      
                                        $(comDialogo).dialog("open");
                                        var json = send4Submit();
                         
                                        /*三目运算符*/
                                        var url = $("input[name=${obj.id}]").val() == "" ? "create" : "update";
                                        url = "/back/${obj.type}/" + url;
                         
                                        $.ajax({
                                                url : url,
                                                data : json,
                                                type : "post",
                                                dataType : "json",
                                                success : function(res) {
                                                        cleanForm();
                                                        tableRefresh();
                                                        comTab.tabs("select",0);
                                                        $(comDialogo).dialog("close");
                                                }
                                        });
                
                                }
                
                                function getSelected(){
                                        try{
                                                var anSelected = tableGetSelected(comTable);	
                                                var aPos = comTable.fnGetPosition(anSelected);
                                                var aData = comTable.fnGetData(comTable.parentNode);
                                        }catch(e){
                                                alert("Please choose one.");
                                        }
                                        return aData[aPos];
                                }
                                
                                function send4Read(){
                                        var select = getSelected();
                                        return $.toJSON({${obj.type} : {${obj.id} : select[0],
                                                        tabName : select[1]
                                                }
                                        });
                                }
                                
                                function send4Submit(){
                                        return $.toJSON({${obj.type} : getForm("name"),
                                                translate : getForm("map")
                                        });
                                }
                
                        });
               
                        function cleanForm(){
                                $("*[name]").val("");
                        }
               
                </script>

                <title>${obj.title}</title>
        </head>
        <body>

                <div id="comTab">
                        <ul>
                                <li>
                                        <a href="#datatable">数据列表</a>
                                </li>
                                <li>
                                        <a href="#opertion">操作列表</a>
                                </li>
                        </ul>
                        <div id="datatable">
                                <button id="buttonCreate">添加</button>
                                <button id="buttonRefresh">刷新</button>
                                <button id="buttonUpdate">更新</button>
                                <button id="buttonDelete">删除</button>

                                <table id="comTable"></table>

                                <label>状态 0：显示，1：隐藏：2：待删除</label>
                        </div>
                        <div id="opertion">
                                <button id="buttonBack">返回</button>
                                <button id="buttonSubmit">提交</button>

                                <fieldset>
                                        <legend>序列号</legend>
                                        <input name="${obj.id}" disabled="true"/>
                                </fieldset>

                                <fieldset>
                                        <legend>目录名</legend>
                                        <input name="tabName"/>
                                </fieldset>

                                <c:forEach items="${obj.lanList}" var="lan"> 
                                        <fieldset>
                                                <legend>${lan.code}</legend>
                                                <input map="${lan.code}" name="${lan.code}"/>
                                        </fieldset>  
                                </c:forEach> 

                                <fieldset>
                                        <legend>状态</legend>
                                        <input name="state" type="number"fast/>
                                        <label>0：显示，1：隐藏：2：待删除</label>
                                </fieldset>

                                <div id="comDialogo"></div>
                        </div>
                </div>

        </body>
</html>
